<template>
  <view class="padding-bottom-sm">
    <uni-card title="生命体征" extra="疾病信息">
      <view class="container">
        <view class="title-content">
          <view class="title">体温：</view>
          <view class="content">{{ diseaseInfo.temperature }}</view>
        </view>
        <view class="unit">℃</view>
      </view>

      <view class="container">
        <view class="title-content">
          <view class="title">呼吸：</view>
          <view class="content">{{ diseaseInfo.breath }}</view>
        </view>
        <view class="unit">次/分</view>
      </view>

      <view class="container">
        <view class="title-content">
          <view class="title">血压：</view>
          <view class="content">{{ diseaseInfo.bloodPressure }}</view>
        </view>
        <view class="unit">mmHg</view>
      </view>

      <view class="container">
        <view class="title-content">
          <view class="title">脉搏：</view>
          <view class="content">{{ diseaseInfo.pulse }}</view>
        </view>
        <view class="unit">次/分</view>
      </view>
    </uni-card>

    <uni-card title="病情详情" extra="疾病信息">
      <view class="container">
        <view class="title-content">
          <view class="title">侧别：</view>
          <view class="content">{{ getBodySide(diseaseInfo.bodySide) }}</view>
        </view>
      </view>

      <view class="container">
        <view class="title-content">
          <view class="title">KOA疾病分级：</view>
          <view class="content">{{ koaGrade.koaDescribe }}</view>
        </view>
      </view>

      <view class="container">
        <view class="title-content">
          <view class="title">过敏史：</view>
          <view class="content">{{ diseaseInfo.allergyHistory ? diseaseInfo.allergyHistory : '暂无' }}</view>
        </view>
      </view>

      <view class="container">
        <view class="title-content">
          <view class="title">是否首次治疗：</view>
          <view class="content">{{ diseaseInfo.isFirstTreatment === 1 ? '是' : '否' }}</view>
        </view>
      </view>
    </uni-card>

    <uni-card title="既往史" extra="疾病信息">
      <empty-page container-height="100px"
        v-if="diseaseInfo.previousHistoryId == null || diseaseInfo.previousHistoryId == ''" text="无既往史" />
      <view v-else>
        <view class="container">
          <view class="title-content">
            <view class="title">疾病名称：</view>
            <view class="content">{{ diseaseInfo.treatmentMap.previousHistory.diseaseName }}</view>
          </view>
        </view>

        <view class="container">
          <view class="title-content">
            <view class="title">开始时间：</view>
            <view class="content">{{ diseaseInfo.treatmentMap.previousHistory.startTime }}</view>
          </view>
        </view>

        <view class="container">
          <view class="title-content">
            <view class="title">结束时间：</view>
            <view class="content">{{ diseaseInfo.treatmentMap.previousHistory.endTime }}</view>
          </view>
        </view>

        <view class="container">
          <view class="title-content">
            <view class="title">是否继续：</view>
            <view class="content">{{ diseaseInfo.treatmentMap.previousHistory.isContinue === 1 ? '是' : '否' }}</view>
          </view>
        </view>
      </view>
    </uni-card>

    <uni-card title="KOA治疗史（药物治疗）" extra="疾病信息">
      <empty-page container-height="100px" v-if="!diseaseInfo.koaDrugHistoryId" text="无KOA药物治疗史" />
      <view v-else>
        <view class="container">
          <view class="title-content">
            <view class="title">药物名称：</view>
            <view v-if="diseaseInfo.treatmentMap.koaDrugHistory.drugName" class='content cu-tag light bg-blue'
              :key="index" v-for="(drugTag, index) in diseaseInfo.treatmentMap.koaDrugHistory.drugName.split('/')">
              {{drugTag}}
            </view>
          </view>
        </view>
        <view class="container">
          <view class="title-content">
            <view class="title">药物类型：</view>
            <view class="content">{{ diseaseInfo.treatmentMap.koaDrugHistory.drugType }}</view>
          </view>
        </view>
        <view class="container">
          <view class="title-content">
            <view class="title">药物使用方法：</view>
            <view class="content">{{ diseaseInfo.treatmentMap.koaDrugHistory.drugUsage }}</view>
          </view>
        </view>
        <view class="container">
          <view class="title-content">
            <view class="title">开始时间：</view>
            <view class="content">{{ diseaseInfo.treatmentMap.koaDrugHistory.startTime }}</view>
          </view>
        </view>
        <view class="container">
          <view class="title-content">
            <view class="title">结束时间：</view>
            <view class="content">{{ diseaseInfo.treatmentMap.koaDrugHistory.endTime }}</view>
          </view>
        </view>
        <view class="container">
          <view class="title-content">
            <view class="title">是否继续：</view>
            <view class="content">{{ diseaseInfo.treatmentMap.koaDrugHistory.isContinue === 1 ? '是' : '否' }}</view>
          </view>
        </view>
      </view>
    </uni-card>

    <uni-card title="KOA治疗史（非药物治疗）" extra="疾病信息">
      <empty-page container-height="100px" v-if="!diseaseInfo.koaNonDrugHistoryId" text="无KOA非药物治疗史" />
      <view v-else>
        <view class="container">
          <view class="title-content">
            <view class="title">治疗方法：</view>
            <view class="content">{{ diseaseInfo.treatmentMap.koaNonDrugHistory.treatmentUsage }}</view>
          </view>
        </view>
        <view class="container">
          <view class="title-content">
            <view class="title">治疗频次：</view>
            <view class="content">{{ diseaseInfo.treatmentMap.koaNonDrugHistory.treatmentFrequency }}</view>
          </view>
        </view>
        <view class="container">
          <view class="title-content">
            <view class="title">开始日期：</view>
            <view class="content">{{ diseaseInfo.treatmentMap.koaNonDrugHistory.startTime }}</view>
          </view>
        </view>
        <view class="container">
          <view class="title-content">
            <view class="title">结束日期：</view>
            <view class="content">{{ diseaseInfo.treatmentMap.koaNonDrugHistory.endTime }}</view>
          </view>
        </view>
        <view class="container">
          <view class="title-content">
            <view class="title">是否继续：</view>
            <view class="content">{{ diseaseInfo.treatmentMap.koaNonDrugHistory.isContinue === 1 ? '是' : '否' }}</view>
          </view>
        </view>
      </view>
    </uni-card>

    <uni-card title="KOA治疗史（手术治疗）" extra="疾病信息">
      <empty-page container-height="100px" v-if="!diseaseInfo.koaOperationHistoryId" text="无KOA手术治疗史" />
      <view v-else>
        <view class="container">
          <view class="title-content">
            <view class="title">手术名称：</view>
            <view class="content">{{ diseaseInfo.treatmentMap.koaOperationHistory.operationName }}</view>
          </view>
        </view>
        <view class="container">
          <view class="title-content">
            <view class="title">治疗单位：</view>
            <view class="content">{{ diseaseInfo.treatmentMap.koaOperationHistory.treatmentUnit }}</view>
          </view>
        </view>
        <view class="container">
          <view class="title-content">
            <view class="title">开始日期：</view>
            <view class="content">{{ diseaseInfo.treatmentMap.koaOperationHistory.startTime }}</view>
          </view>
        </view>
        <view class="container">
          <view class="title-content">
            <view class="title">结束日期：</view>
            <view class="content">{{ diseaseInfo.treatmentMap.koaOperationHistory.endTime }}</view>
          </view>
        </view>
      </view>
    </uni-card>
    <uni-card title="诊断详情" extra="诊断信息">
      <empty-page container-height="100px" v-if="!treatmentInfo.id" text="无诊断信息" />
      <view v-else>
        <view class="container">
          <view class="title-content">
            <view class="title">膝关节骨性关节炎（K-L分期）：</view>
            <view class="content">{{ treatmentInfo.klStage === 0 ? '（左，L）' : '（右，R）' }}</view>
          </view>
        </view>
        <view class="container">
          <view class="title-content">
            <view class="title">膝关节骨性关节炎中医诊断及证型：</view>
            <view class="content">{{ treatmentInfo.diagnoseResult }}</view>
          </view>
        </view>
      </view>
    </uni-card>

    <uni-card title="治疗史（药物治疗）" extra="诊断信息">
      <empty-page container-height="100px" v-if="!treatmentInfo.drugTreatmentId" text="无药物治疗史" />
      <view v-else>
        <view class="container">
          <view class="title-content">
            <view class="title">药物名称：</view>
            <view v-if="treatmentInfo.treatmentMap.drugTreatment.drugName" class='content cu-tag light bg-blue'
              :key="index" v-for="(drugTag, index) in treatmentInfo.treatmentMap.drugTreatment.drugName.split('/')">
              {{drugTag}}
            </view>
          </view>
        </view>
        <view class="container">
          <view class="title-content">
            <view class="title">药物分类：</view>
            <view class="content">{{ treatmentInfo.treatmentMap.drugTreatment.drugType }}</view>
          </view>
        </view>
        <view class="container">
          <view class="title-content">
            <view class="title">药物使用方法：</view>
            <view class="content">{{ treatmentInfo.treatmentMap.drugTreatment.drugUsage }}</view>
          </view>
        </view>
        <view class="container">
          <view class="title-content">
            <view class="title">开始时间：</view>
            <view class="content">{{ treatmentInfo.treatmentMap.drugTreatment.startTime }}</view>
          </view>
        </view>
        <view class="container">
          <view class="title-content">
            <view class="title">结束时间：</view>
            <view class="content">{{ treatmentInfo.treatmentMap.drugTreatment.endTime }}</view>
          </view>
        </view>
      </view>
    </uni-card>

    <uni-card title="治疗史（非药物治疗）" extra="诊断信息">
      <empty-page container-height="100px" v-if="!treatmentInfo.nonDrugTreatmentId" text="无非药物治疗史" />
      <view v-else>
        <view class="container">
          <view class="title-content">
            <view class="title">治疗方法：</view>
            <view class="content">{{ treatmentInfo.treatmentMap.nonDrugTreatment.treatmentUsage }}</view>
          </view>
        </view>
        <view class="container">
          <view class="title-content">
            <view class="title">治疗频次：</view>
            <view class="content">{{ treatmentInfo.treatmentMap.nonDrugTreatment.treatmentFrequency }}</view>
          </view>
        </view>
        <view class="container">
          <view class="title-content">
            <view class="title">开始时间：</view>
            <view class="content">{{ treatmentInfo.treatmentMap.nonDrugTreatment.startTime }}</view>
          </view>
        </view>
        <view class="container">
          <view class="title-content">
            <view class="title">结束时间：</view>
            <view class="content">{{ treatmentInfo.treatmentMap.nonDrugTreatment.endTime }}</view>
          </view>
        </view>
        <view class="container">
          <view class="title-content">
            <view class="title">是否继续：</view>
            <view class="content">{{ treatmentInfo.treatmentMap.nonDrugTreatment.isContinue === 1 ? '是' : '否' }}</view>
          </view>
        </view>
      </view>
    </uni-card>
    <uni-card title="治疗史（手术治疗）" extra="诊断信息">
      <empty-page container-height="100px" v-if=" !treatmentInfo.operationTreatmentId " text="无手术治疗史" />
      <view v-else>
        <view class="container">
          <view class="title-content">
            <view class="title">手术名称：</view>
            <view class="content">{{ treatmentInfo.treatmentMap.operationTreatment.operationName }}</view>
          </view>
        </view>
        <view class="container">
          <view class="title-content">
            <view class="title">治疗单位：</view>
            <view class="content">{{ treatmentInfo.treatmentMap.operationTreatment.treatmentUnit }}</view>
          </view>
        </view>
        <view class="container">
          <view class="title-content">
            <view class="title">开始日期：</view>
            <view class="content">{{ treatmentInfo.treatmentMap.operationTreatment.startTime }}</view>
          </view>
        </view>
        <view class="container">
          <view class="title-content">
            <view class="title">结束日期：</view>
            <view class="content">{{ treatmentInfo.treatmentMap.operationTreatment.endTime }}</view>
          </view>
        </view>
      </view>
    </uni-card>

    <view class="cu-bar btn-group" @click="black">
      <button class="cu-btn bg-blue shadow-blur">返回</button>
    </view>
  </view>
</template>

<script>
  export default {
    onLoad(option) {
      // 根据id查询到详细信息
      const id = option.id;
      this.fetchData(id);
    },
    methods: {
      black() {
        uni.navigateBack({
          delta: 1
        })
      },
      getBodySide(bodySide) {
        if (bodySide === 0) {
          return '左侧';
        } else if (bodySide === 1) {
          return '右侧';
        } else if (bodySide === 2) {
          return '双侧';
        }
      },
      async fetchData(id) {
        const {
          data: res
        } = await uni.$http.get(`/info/diseaseInfo/${id}`)
        if (res.code !== 200) return uni.$showMsg()
        this.diseaseInfo = res.data.diseaseInfo;
        this.koaGrade = res.data.koaGrade;
        this.treatmentInfo = res.data.treatmentInfo;
      }
    },
    data() {
      return {
        diseaseInfo: {
          bodySide: null,
        },
        treatmentInfo: {
          drugTreatmentId: null
        },
        koaGrade: null
      };
    }
  };
</script>

<style lang="scss">
  .container {
    display: flex;
    align-items: center;
    overflow-x: auto;

    /* 溢出内容滚动 */
    .title-content {
      display: flex;
      align-items: center;

      .title {
        font-size: 14px;
        color: #333;
        flex-shrink: 0;
        /* 题目不缩小 */
      }

      .content {
        color: #666;
        font-size: 14px;
        white-space: nowrap;
        /* 不换行 */
        padding-right: 10px;
        /* 为滚动条留出空间 */
      }
    }

    .unit {
      font-size: 14px;
      color: gray;
      color: #666;
      /* 内容颜色，比题目颜色浅一些 */
    }
  }
</style>